<template>
    <view>
        <div class="top_img">
            <image :src="imageBaseUrl + '/img/Alipay.png'"></image>
        </div>
        <div class="top_text">支付成功</div>
        <div class="title">{{ info.name }}</div>
        <div class="total_price">￥{{ info.total_price }}</div>
        <div class="pay_success">
            <div class="pay_success_btn" @click="indent">完成</div>
        </div>
        <div class="pay_success_text" @click="goDetails">查看订单详情</div>
        <div class="fond">
            ——— <text class="font"> 你可能还喜欢
            </text> ———
        </div>
        <div class="all">
            <div class="item" v-for="(item, index) in data" :key="index"  @click="nulls">
                <div class="img">
                    <image :src="`${imgs}${item.img}`" mode="aspectFill">
                    </image>
                </div>
                <div class="text">
                    <div class="text_top">{{ item.name }}</div>
                    <div class="text_title">
                        <div class="title_left">游玩榜</div>
                        <div class="title_right">新乡 景区榜第1名</div>
                    </div>
                    <div class="score">
                        <div class="score_img">
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/blank.png'" alt="" />
                        </div>
                        <div class="score_num">4分</div>
                        <div class="score_text">
                            1000条评价
                        </div>
                    </div>
                    <div class="score_box">
                        距离你26km
                    </div>
                    <div class="buy">
                        <div class="buy_title">可订明日</div>
                        <div class="buy_btn">
                            门票<text style="color: red;">￥</text><text style="color: red; font-size: 20px;
                            font-weight: 600;">80</text>起
                        </div>
                    </div>
                    <div class="text_bottm">
                        <div class="text_bottm_title">必玩 ·</div>
                        <div class="text_bottm_text">{{ item.must }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="no_more">没有更多了....</div>
    </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import api from '../../api/scenic/index.js';
import config from '../../config/index.js';
const imageBaseUrl = config.image;
const imgs = config.image;
const info = ref([]);// 获取订单信息
const data = ref([]);// 景区数据
const id = ref('');// 获取订单id
// 跳转订单详情
const goDetails = () => {
    uni.navigateTo({
        url: '/pages/Order_Details/Order_Details'
    })
}
onMounted(() => {
    // 初始获取容器宽度
    id.value = uni.getStorageSync('id');
    console.log(id.value);// 获取订单id
    info.value = uni.getStorageSync('orderInfo');//获取订单信息
    api.scenic({}).then((res) => {
        // 景区数据
        data.value = res.data;

        console.log('接口数据:', res.data)
    }).catch((err) => {
        console.error('景区数据请求失败:', err)
    })
    api.Indent({
        user_id: uni.getStorageSync('token').id
    }).then(res => {
        console.log(res.data);
        res.data.map((item) => {
            if (item.id == id.value) {
                uni.setStorageSync('QR_code', item)
                console.log(item);
            }
        })

    });
})
// 点击事件
const nulls = () => {
  uni.showToast({
    title: '待开发至中......',
    icon: 'none'
  });
}
// 点击完成
const indent = () => {
    uni.navigateTo({
        url: '/pages/indent/indent'
    })
}
</script>

<style>
.text_bottm {
    width: 95%;
    display: flex;
}

.text_bottm_title {
    color: #535353;
    font-size: 16px;
    font-weight: 600;
    width: 22;
}

.no_more {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    color: #535353;
    margin-bottom: 20px;
    height: 50px;
}

.text_bottm_text {
    width: 78%;
    /* 溢出隐藏文字显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buy_title {
    width: 80px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    border: #ECE2C3 1px solid;
}

.buy {
    margin-top: 10px;
    width: 95%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.score_num {
    font-size: 17px;
    color: red;
    margin-left: 10px;
    margin-right: 10px;
}

.score {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.score_img image {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.title_left {
    background-color: #FFC300;
    width: 32%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.title_right {
    background-color: #ECE2C3;
    width: 68%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.text_title {
    font-size: 15px;
    margin-top: 10px;
    border-radius: 10px;
    height: 30px;
    width: 75%;
    overflow: hidden;
    display: flex;
}

.text_top {
    width: 100%;
    font-size: 18px;
}

.text {
    width: 68%;
    color: #636363;

    height: 180px;
    margin-left: 2%;
    margin-top: 10px;
    background-color: #fff;
}

.img image {
    width: 100%;
    height: 180px;
    /* 图片不变形 */
    object-fit: cover;
}

.img {
    width: 30%;
    height: 180px;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.item {
    height: 200px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    background-color: #fff;
}

.all {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 96%;
    margin-left: 2%;
}

.font {
    color: #000;
    font-size: 17px;
    font-weight: 600;
    margin-left: 10px;
    margin-right: 10px;
}

.fond {
    margin-top: 50px;
    text-align: center;
    color: #bdbdbd;
}

.pay_success_text {
    text-align: center;
    margin-top: 30px;
    color: #7c7c7c;
}

.pay_success_btn {
    width: 180px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 5px;
    background: #fff;
    color: #09BB07;
    border: #09BB07 1px solid;
    font-size: 30rpx;
    margin: 0 auto;
}

.pay_success {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.total_price {
    margin-top: 20px;
    text-align: center;
    font-size: 35px;
}

.title {
    text-align: center;
    margin-top: 80px;
}

.top_text {
    color: #09BB07;
    text-align: center;
}

.top_img {
    width: 100%;
    margin-top: 80px;
    text-align: center;
}

.top_img image {
    width: 50px;
    height: 50px;
}
</style>